<template>
    <div>
        <!-- <CommentList
            v-if="!isFullscreen"
            ref="commentListRef"
            @play-to-specified-point="playToSpecifiedPoint"
        /> -->
        <CommentInputBar
            :has-comment-popup="props.hasCommentPopup"
            :is-creater="isCreater"
            :is-upload-img="isUploadImg"
            :catalogue-id="catalogueId"
            @on-commented="onCommented"
        />
    </div>
</template>

<script setup>
import CommentList from './detail/comment/comment-list';
import CommentInputBar from './detail/comment-input/comment-input-bar';
import {ref} from 'vue';

const props = defineProps({
    hasCommentPopup: {
        type: Boolean,
        default: false
    },
    isCreater: {
        type: Boolean,
        default: false
    },
    isUploadImg: {
        type: Boolean,
        default: false
    },
    catalogueId: {
        type: [Number, String],
        default: ''
    }
})
const emit = defineEmits(['play-to-specified-point']);

const commentListRef = ref();
function playToSpecifiedPoint(data) {
    emit('play-to-specified-point', data);
}

function onCommented() {
    if (commentListRef.value) {
        commentListRef.value.refreshComments();
    }
}
</script>